import React from 'react';
import styles from './index.less';
import { Layout, notification } from 'antd';
import HeaderC from '../../components/Layout/header';
import MainMenu from '../../components/Layout/menu/mainMenu';
// import SubMenu from '../../components/Layout/menu/subMenu';
import { connect } from 'dva';

const { Header, Footer, Sider, Content } = Layout;

@connect(state => ({
  login: state.login,
  global: state.global,
}))
class Components extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: '',
      visible: false,
      loading: false,
    };
  }

  /**
   * 注销登陆
   */
  logout = () => {
    this.props.dispatch({
      type: 'login/logout',
    });
  };

  /**
   *webssh
   */
  getMainDevToken = () => {
    this.setState({
      loading: true,
    });
    this.props.dispatch({
      type: 'global/getMainDevToken',
      callback: data => {
        if (data) {
          this.setState({
            token: data,
            visible: true,
            loading: false,
          });
        }else {
          this.setState({
            loading: false
          })
        }
      },
    });
  };
  //关闭webssh
  close = () => {
    this.setState({
      visible: false,
    });
  };

  /**
   * 刷新缓存
   */
  fresh = () => {
    this.setState({
      freshLoading: true,
    });
    this.props.dispatch({
      type: 'global/fresh',
      callback: data => {
        if (data) {
          notification['success']({
            message: '详情',
            duration: 3,
            description: data,
          });
        }
        this.setState({
          freshLoading: false,
        });
      },
    });
  };

  /**
   * 启用配置
   */
  startConfig = () => {
    this.setState({
      startConfigLoading: true,
    });
    this.props.dispatch({
      type: 'global/startConfig',
      callback: () => {
        this.setState({
          startConfigLoading: false,
        });
      },
    });
  };

  render() {
    const { props } = this.props;
    const { token, visible, loading, freshLoading, startConfigLoading } = this.state;
    return (
      <Layout className={styles.outWrapper}>
        <Sider style={{ paddingTop: '50px', textAlign: 'left', height: '100%' }} theme="dark">
          <div className={styles.logo}>
            <img src={require('../../assets/images/logo-s1.png')} alt="" />
          </div>
          <MainMenu curMenu={props.location} />
        </Sider>
        <Layout>
          <Header
            style={{ background: '#fff', paddingLeft: '0', overflow: 'hidden', height: '8vh' }}
          >
            <HeaderC
              logout={this.logout}
              getMainDevToken={this.getMainDevToken}
              token={token}
              visible={visible}
              close={this.close}
              loading={loading}
              fresh={this.fresh}
              freshLoading={freshLoading}
              startConfig={this.startConfig}
              startConfigLoading={startConfigLoading}
            />
          </Header>
          <Content
            style={{
              minHeight: 'auto',
              paddingTop: '2vh',
              background: '#F4F4F4',
            }}
          >
            <Layout style={{ background: 'white' }}>
              <div className={styles.content}>{props.children}</div>
            </Layout>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default Components;
